.home{
  padding: 0 3rem;
  background: var(--greyLight-1);
  min-width: 65rem;
  padding-bottom: 7rem;
  //头部导航
  header{
    position: fixed;
    z-index: 90;
    top: .7rem;
    width: 92%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
    border-radius: 1rem;
    color: var(--greyDark);
    background-color: var(--greyLight-1);
    padding-right: 0.5rem;
    //图标
    h1{
      margin: 0;
      width: 5.5rem;
      img{
        width: 4.6rem;
      }
    }
    //建议，赞助
    .ant-dropdown-trigger:hover{
      cursor: pointer;
      color: var(--primary);
      box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
      
    }
    .ant-dropdown-trigger{
      box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
      border-radius: .6rem;
      width: 3rem;
      display: flex;
      margin: 0 1rem;
      flex-direction: column;
      align-items: center;
      span{
        margin: .2rem 0 0 0;
      }
    }
    // 搜索框
    .headsearch{
      position: relative;
      .search{
        position: relative;
        width: 22rem;
        z-index: 30;
        .search__input {
            border: none;
            border-radius: 1rem;
            font-size: 1.4rem;
            padding-left: 3rem;
            box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
            background: none;
            font-family: inherit;
            color: var(--greyDark);
          }
        .search__input::placeholder {
          color: var(--greyLight-3);
        }
        .search__input:focus {
            
          outline: none;
          box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
        }
        .search__input:focus + .search__icon {
          color: var(--primary);
        }
        .search__icon {
          // height: 2rem;
          position: absolute;
          font-size: 2rem;
          padding: 0 .7rem;
          display: flex;
          color: var(--greyDark);
          transition: 0.3s ease;
          top: .4rem;
        }
      }
      .headcontent{
        display: none;
        position: absolute;
        // height: 25rem;
        top: 0;
        padding: 0 .5rem;
        width: 100%;
        background:var(--greyLight-1);
        z-index: 29;
        box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
        padding-top: 4rem;
        border-radius: 1rem;
        .headhistory{   
          margin-bottom: .5rem;
          div{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .5rem;
            strong{
              font-size: 1rem;
              font-weight: 600;
            }
            
            span{
              box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
              border-radius: .5rem;
              padding: 0 .5rem;
              user-select: none;
            }
            span:hover{
              cursor: pointer;
              box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

              color: var(--primary);

            }
            span:active{
              box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
            }
          }
          ul{
            box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
            border-radius: 1rem;
            overflow: scroll;
            max-height: 7rem;
            padding: .5rem .5rem;
            li{
              position: relative;
              float: left;
              border-radius: .5rem;
              padding: 0 .6rem;
              margin: 0.3rem;
              box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

              span{
                display: none;
                position: absolute;
                top: -.2rem;
                border-radius: 50%;
                right: -0.3rem;
                line-height: .5rem;
                padding: 0 .1rem;
                height: 0.7rem;
                background: var(--greyLight-2);
              }
            }
            li:hover{
              cursor: pointer;
              box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
              color: var(--primary);
              span{
                display: block;
              }
            }
            span:hover{
              color: rgb(255, 255, 255);
            }
          }
          

        }
        .headhot{
          a{
            color: var(--greyDark);
          }
          ul{
            li:hover{
                box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
            color: var(--primary);
            }
            li{
              font-size: 1rem;
              padding: 0 .5rem;
              border-radius: .4rem;
              margin: .8rem 0;
              box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
              strong{
                margin-right: .5rem;
              }
            }
          }
          
        }
      }
    }
    // 观看历史记录
    .historydata{
      // width: 8rem;
      // position: relative;
      .ant-dropdown{
        overflow: scroll;
        max-height: 30rem;
        width: 22rem;
        padding: 1rem .5rem;
        top: 4rem!important;
        background: var(--greyLight-1);
        border-radius: .5rem;
        box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
        .historycontent{
          a{
            display: flex;
            max-height:8rem;
            color: var(--greyDark);
            margin-bottom: 0.6rem;
            box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
            border-radius: .5rem;
            padding: .5rem;
          }
          a:hover{
            box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
            color: var(--primary);
            cursor: pointer;
          }
          p{
            margin-bottom: 0rem; 
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            strong{
              overflow: hidden;
              -webkit-box-orient: vertical;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-break: anywhere;
            }
            
          }
        }
        
      }
      img{
        width: 45%;
        margin-right: .5rem;
        border-radius: .5rem;
      }
    }
    // 用户
    .ant-btn-group{
        border-radius: 1rem;
        border: 0px solid red;
        box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
        background: none;
        color: var(--greyLight-3);
        align-items: center;
        button{
            background: none;
            border: none;
            width: 4rem;
            overflow: hidden;
            padding: 0 .2rem;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .ant-dropdown-trigger{
          margin: 0;
          justify-content: center;
          height: 3rem;
          
          span{
            margin: 0;
          }
        }
    }
  
    .ant-input-group-wrapper{
        margin: 0 1rem;
        input{
            border-radius: 1rem!important;
        }
        .ant-input-group-addon{
            left: -45px!important;
            z-index: 20;
            button{
                border-radius: 1rem!important;
                
            }
        }
        
    }
  }

 

  // 最上面
  .container{
    display: flex;

    // 骨架屏
    .ant-space-item{
      width: 48%;
      height: 100%;
    }
    .ant-skeleton-image{
      width: 100%;
    }
    .ant-skeleton{
      width: 100%;
      height: 100%;
    }
    .ant-skeleton-image{
      height: 100%;
      border-radius: 1rem;
    }
     // 轮播图
    .ant-carousel:hover{
      cursor: pointer;
      box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
      .slick-slide{
        img{
          transform: scale(1.05);
        }
      }
      
    }
    .ant-carousel{
      // width: 50%;
      margin-right: 2rem;
      flex: 1;
      overflow: hidden;
      box-shadow:1rem 1rem .4rem var(--greyLight-2), -.2rem -0.2rem 0.5rem var(--white);
      border-radius: 1rem;
      img{
        width: 100%;
        transition: all .4s;
      }
      .slick-slider{
        h3{
          margin-bottom: -2px;
          
        }
        .slick-dots-bottom{
          bottom: 0;
        }
      }
    }
    // 轮播图左右箭头
    .ant-carousel .slick-prev,
    .ant-carousel .slick-next {
      color: var(--greyLight-2);
      z-index: 28;
      // font-size: inherit;
    }
    
    
    .ant-carousel .slick-next:hover{
      font-size: 1.5rem;
      // background: linear-gradient(90deg, transparent, var(--greyLight-2));
      box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

    }
    .ant-carousel .slick-prev:hover{
      font-size: 1.5rem;
      // background: linear-gradient(90deg,var(--greyLight-2),transparent);
      box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

    }
    .ant-carousel .slick-prev,.ant-carousel .slick-next{
      border-radius: 1rem;
      height: 100%;
      width: 2rem;
      top: .7rem;
      
      display: flex!important;
      align-items: center;
    }
    .ant-carousel .slick-next{
      right: 0;
      flex-direction: row-reverse;
      
    }
    .ant-carousel .slick-prev{
      left: 0;
    }
    .recommended-card{
      display: grid;
      grid-template-columns: auto auto;
    justify-content: space-between;
    align-content: space-between;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
      // display: flex;
      // flex-wrap: wrap;
      flex: 1;
      width: 50%;
      a:hover{
        box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
        p{
          color: var(--primary);
        }
        img{
          transform: scale(1.05);
        }
      }
     a{
        // flex: 40%;
        box-shadow:1rem 1rem .4rem var(--greyLight-2), -.2rem -0.2rem 0.5rem var(--white);
        overflow: hidden;
        border-radius: .7rem;
        // height: 47%;
        img{
          width: 100%;
          border-radius: .7rem;
          transition: all .4s;
        }
        
        p{
          margin: .4rem .4rem;
          color: var(--greyDark);
          height: 22%;
          overflow: hidden;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-break: anywhere;
        }
        
      }
      // a:nth-child(even){
      //   margin-left: 1.5rem;
      // }
      // a:first-child,a:nth-child(2){
      //   margin-bottom: 1.6rem;
      // }
      
    }
  }

  //内容区
  .content{
    box-shadow:1rem 1rem .4rem var(--greyLight-2), -.2rem -0.2rem 0.5rem var(--white);
    border-radius: 1rem;
    padding-bottom: 1rem;
  }



  
  //聊天框按钮
  .chat{
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      background: var(--greyLight-1);
      box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
      color: var(--greyDark);
      border-radius: 1rem;
  }
}



//用户弹窗
.ant-dropdown-menu{
    background: var(--greyLight-1);
    border-radius: 1rem;
    overflow: hidden;
}
// 聊天弹窗
.ant-popover-placement-topRight{
      position: fixed;
      max-height: 20rem;
      background: var(--greyLight-1);
      .search{
        width: 100%;
      }
      ::-webkit-scrollbar{
        background:none;
        width: .5rem;
        height: 0rem;
      }
      ::-webkit-scrollbar-thumb{
        background: var(--greyLight-2);
        border-radius: 1rem;
      }
      .ant-popover-inner-content{
        overflow: scroll;
        max-height: 15rem;
      ul{
        li{
          color: var(--greyDark);
          box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
          border-radius: .7rem;
          margin: .6rem 0;
          display: flex;
          flex-wrap: wrap;
          padding:0 .5rem;
          div{
            width: 100%;
            span{
              float: right;
            }
          }
          pre{
            white-space:pre-wrap;
            word-wrap:break-word;
            margin-bottom: 0;
          }
        }
      }
      }
      // .form__input {
      //   width: 100%;
      //   height: 2rem;
      //   border: none;
      //   border-radius: .5rem;
      //   font-size: 1rem;
      //   padding-left: 1rem;
      //   box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
      //   background: none;
      //   font-family: inherit;
      //   color: var(--greyDark);
      // }
      // .form__input::placeholder {
      //   color: var(--greyLight-3);
      // }
      // .form__input:focus {
      //   outline: none;
      //   box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
      // }

    .ant-popover-inner{
        background: none;
        border-radius: 1rem;
        box-shadow:1rem 1rem .4rem var(--greyLight-2), -.2rem -0.2rem 0.5rem var(--white);

        
    }
    .ant-popover-arrow-content::before{
        background: var(--greyLight-1);
    }

}

.ant-back-top{
  text-align: center;
  line-height: 40px;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  border-radius: 1rem;
  position: fixed;
  bottom: 5rem;
  right: 2rem;
  color: var(--greyDark);
  background: var(--greyLight-1);

}
.ant-back-top:hover{
  color: var(--primary);
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

}


